<template>
  <div class="dashboard-page">
    <!-- 第一行 -->
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="13">
            <el-card style="height: 126px" class="card1">
              <div class="header">
                <div class="title">
                  工单统计
                  <span class="right-time">{{`${StartTime}~${FinishTime}`}}</span>
                </div>
              </div>
              <div class="body body1">
                <el-statistic
                  :value="reportInfo.total"
                  title="工单总数(个)"
                ></el-statistic>
                <el-statistic
                  :value="reportInfo.completedTotal"
                  title="完成工单(个)"
                ></el-statistic>
                <el-statistic
                  :value="reportInfo.progressTotal"
                  title="进行工单(个)"
                ></el-statistic>
                <el-statistic
                  :value="reportInfo.cancelTotal"
                  title="取消工单(个)"
                ></el-statistic>
              </div>
            </el-card>
          </el-col>
          <el-col :span="11">
            <el-card style="height: 126px" class="card2">
              <div class="header">
                <div class="title">
                  销售统计
                  <span class="right-time">{{`${StartTime}~${FinishTime}`}}</span>
                </div>
              </div>
              <div class="body body2">
                <el-statistic
                  :value="Number(order.count)"
                  title="订单量(个)"
                ></el-statistic>
                <el-statistic
                  :value="order.amount"
                  title="销售额(万元)"
                  :precision="2"
                ></el-statistic>
              </div>
            </el-card>
          </el-col>
        </el-row>
<!-- 周月年echarts -->
          <el-row :gutter="20" style="margin-top: 20px">
          <el-col>
            <el-card style="height: 312px">
              <div class="header">
                <div class="title">
                  销售统计
                  <span class="right-time">{{ echartTime }}</span>
                </div>
                <el-radio-group
                  v-model="radioValue"
                  class="week-month-year"
                  size="small"
                  @input="getAmountCollect"
                >
                  <el-radio-button label="周"></el-radio-button>
                  <el-radio-button label="月"></el-radio-button>
                  <el-radio-button label="年"></el-radio-button>
                </el-radio-group>
              </div>
              <!-- 第一步，定义一个固定宽高的容器 -->
              <div class="echarts">
                <div class="echart" ref="echart1"></div>
                <div class="echart" ref="echart2"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
<!-- 周月年echarts -->
      </el-col>
      <el-col :span="6">
        <el-card style="height: 498px" shadow="never">
          <div class="header">
            <div class="title">
              商品热榜
              <span class="right-time">{{`${StartTime}~${FinishTime}`}}</span>
            </div>
          </div>
          <!-- 根据长度控制显示   -->
          <div class="goodshot" v-if="hotTop.length !== 0">
            <el-row v-for="(item, index) in hotTop" :key="index">
              <el-col :span="5">
                <div class="top" :class="'top' + (index + 1)">
                  {{ index + 1 }}
                </div>
              </el-col>
              <el-col :span="13">
                <!-- 鼠标停留回显字 待做-->
                 <el-popover  placement="bottom"  trigger="hover">
                    <div class="item" slot="reference">{{ item.skuName }}</div>
                    <div class="hot-name">{{ item.skuName }}</div>
                  </el-popover>

              </el-col>
              <el-col :span="6">
                <div class="count">{{ item.count }}单</div>
              </el-col>
            </el-row>
          </div>
          <el-empty v-else description="暂无数据"></el-empty>
        </el-card>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="14">
        <el-card style="height: 313px" shadow="never">
         <div class="header">
            <div class="title">合作商点位数Top5</div>
            <el-button
              icon="el-icon-more"
              circle
              size="mini"
              @click="$router.push('/partnermanage')"
            ></el-button>
          </div>
          <div class="body" style="margin-top: 20px">
            <el-row>
              <el-col :span="17">
                <div ref="echart3" style="width: 100%; height: 300px"></div>
              </el-col>
              <el-col :span="7">
                <div class="collect">
                  <div class="count count">{{ nodeCount }}</div>
                  <div class="name">点位数</div>

                  <div class="count count2">{{ partnerCount }}</div>
                  <div class="name">合作商数</div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
       <el-col :span="10">
        <el-card style="height: 313px" shadow="never">
          <div class="header">
            <div class="title">异常设备监控</div>
            <el-button
              icon="el-icon-more"
              circle
              size="mini"
            ></el-button>
          </div>

          <el-empty description="暂无数据"></el-empty>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入echarts里所有项，重命名
import * as echarts from 'echarts'
// 三个echarts分别对应
import dayjs from 'dayjs'

import {
  getReportInfo,
  getOrderCount,
  getOrderAmount,
  getHotTop,
  getStatusTop10,
  getAmountCollect,
  getRegionCollect,
  getNodeCount,
  getPartnerCount,
  getNodeCollect
} from '@/api/dashboard'
export default {
  data () {
    return {
      start: '',
      finish: '',
      reportInfo: {
        cancelTotal: 0,
        completedTotal: 0,
        progressTotal: 0,
        total: 0
      },
      order: {
        count: 0,
        amount: 0
      },
      hotTop: [],
      StatusTop10: [],
      statustop10: [],
      nodeCount: 0,
      partnerCount: 0,
      radioValue: '周',
      xyAmountCollect: {},
      xyRegionCollect: {},
      amountCollectX: [],
      amountCollectY: [],
      echartTime: '',
      weekFirstDay: ''
    }
  },
  computed: {
    StartTime () {
      return this.start.split(' ')[0].replace(/-/g, '.')
    },
    FinishTime () {
      return this.finish.split(' ')[0].replace(/-/g, '.')
    }
  },
  created () {
    this.getTime()
    this.getReportInfo()
    this.getOrderCount()
    this.getOrderAmount()
    this.getHotTop()
    this.getStatusTop10()
    this.getAmountCollect()
    this.getNodeCollect()
    this.getNodeCount()
    this.getPartnerCount()
  },
  methods: {
    getTime () {
      this.start = `${dayjs(new Date()).format('YYYY-MM')}-01 00:00:00`
      this.finish = `${dayjs(new Date()).format('YYYY-MM-DD')} 23:59:59`
    },
    async getReportInfo () {
      const res = await getReportInfo(this.start, this.finish)
      // console.log(res)
      res.forEach((item) => {
        this.reportInfo.total += item.total
        this.reportInfo.completedTotal += item.completedTotal
        this.reportInfo.progressTotal += item.progressTotal
        this.reportInfo.cancelTotal += item.cancelTotal
      })
    },
    async getOrderCount () {
      this.order.count = Number(await getOrderCount(this.start, this.finish))
    },
    async getOrderAmount () {
      this.order.amount =
        Number(await getOrderAmount(this.start, this.finish)) / 1000000
    },
    async getHotTop () {
      this.hotTop = await getHotTop(
        this.start.split(' ')[0],
        this.finish.split(' ')[0]
      )
    },
    async getStatusTop10 () {
      this.statustop10 = await getStatusTop10()
    },
    // message: function () {
    //   this.message = this.item.skuName
    // },
    async getAmountCollect () {
      if (this.radioValue === '周') {
        this.weekFirstDay = dayjs()
          .startOf('week')
          .add(1, 'day')
          .format('YYYY-MM-DD')
        this.echartTime = `${dayjs()
          .startOf('week')
          .add(1, 'day')
          .format('YYYY.MM.DD')}~${this.finish.split(' ')[0].replace(/-/g, '.')}`
        this.xyAmountCollect = await getAmountCollect(
          1,
          this.weekFirstDay,
          this.finish.split(' ')[0]
        )
        this.amountCollectX = [
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六',
          '星期日'
        ].slice(0, this.xyAmountCollect.xAxis.length)
        this.echarts1(
          this.xyAmountCollect,
          this.amountCollectX,
          this.$refs.echart1
        )

        this.getRegionCollect(this.weekFirstDay, this.finish.split(' ')[0])
      }
      if (this.radioValue === '月') {
        this.echartTime = `${this.start
          .split(' ')[0]
          .replace(/-/g, '.')}~${this.end.split(' ')[0].replace(/-/g, '.')}`
        this.xyAmountCollect = await getAmountCollect(
          1,
          this.start.split(' ')[0],
          this.finish.split(' ')[0]
        )
        this.amountCollectX = this.xyAmountCollect.xAxis.map((item) =>
          item.replace(/-/, '月').replace(/-/, '日')
        )
        this.echarts1(
          this.xyAmountCollect,
          this.amountCollectX,
          this.$refs.echart1
        )
        this.getRegionCollect(this.start.split(' ')[0], this.finish.split(' ')[0])
      }
      if (this.radioValue === '年') {
        this.echartTime = `${
          this.start.split(' ')[0].split('-')[0]
        }.01.01~${this.end.split(' ')[0].replace(/-/g, '.')}`
        this.xyAmountCollect = await getAmountCollect(
          2,
          `${this.start.split(' ')[0].split('-')[0]}-01-01`,
          this.finish.split(' ')[0]
        )
        this.amountCollectX = this.xyAmountCollect.xAxis.map((item) =>
          item.replace(/-/, '月').replace(/-/, '日')
        )
        this.echarts1(
          this.xyAmountCollect,
          this.amountCollectX,
          this.$refs.echart1
        )
        this.getRegionCollect(
          `${this.start.split(' ')[0].split('-')[0]}-01-01`,
          this.finish.split(' ')[0]
        )
      }
    },
    async getRegionCollect (start, finish) {
      this.xyRegionCollect = await getRegionCollect(start, finish)
      this.echarts2(this.xyRegionCollect, this.$refs.echart2)
    },
    async getNodeCount () {
      this.nodeCount = await getNodeCount()
    },
    async getPartnerCount () {
      this.partnerCount = await getPartnerCount()
    },
    async getNodeCollect () {
      this.nodeCollect = await getNodeCollect()
      this.echarts3(this.nodeCollect, this.$refs.echart3)
    },
    // 封装echarts1
    echarts1 (data, x, dom) {
      const myEcharts = echarts.init(dom)
      // 第三步，设置配置项
      myEcharts.setOption({
        title: {
          text: '销售额趋势图',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: '销售额: {c}<br/>{b}'
        },
        xAxis: {
          axisTick: {
            alignWithLabel: true
          },
          type: 'category',
          data: x
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: data.series.map((item) => item / 100),
            type: 'line',
            smooth: true,
            itemStyle: {
              color: 'rgba(244, 30, 30, 1)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#fdc4c4'
                  },
                  {
                    offset: 1,
                    color: '#fff'
                  }
                ]
              }
            }
          }
        ]
      })
    },
    // 封装echarts2
    echarts2 (data, dom) {
      const myEcharts = echarts.init(dom)
      // 第三步，设置配置项
      myEcharts.setOption({
        title: {
          text: '销售额分布',
          left: '40%',
          textStyle: {
            fontSize: 14
          }
        },
        barWidth: '20',
        grid: {
          left: '30%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '销售额: {c}<br/>{b}'
        },
        xAxis: {
          type: 'category',
          data: data.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: data.series.map((item) => item / 100),
            type: 'bar'
          }
        ]
      })
    },
    // 封装echarts3
    echarts3 (data) {
      const myEcharts = echarts.init(this.$refs.echart3)
      // 第三步，设置配置项
      myEcharts.setOption({
        label: {
          trigger: 'item',
          formatter: '{b} \n {d}%'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} <br/>总占比 : {d}%'
        },
        series: [
          {
            name: 'point Chart',
            type: 'pie',
            radius: ['40', '60%'],
            center: ['50%', '50%'],
            roseType: 'radius',
            data: data
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-page {
  .el-card {
    border-radius: 20px;
    padding: 20px;
  }
  .header {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      .right-time {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #999;
      }
    }
    .el-button {
      padding: unset;
      width: 16px;
      height: 16px;
      color: #5f84ff;
      text-align: center;
      line-height: 16px;
    }
  }
  .body1,
  .body2 {
    display: flex;
    height: 107px;
    .el-statistic {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
    }
  }
  .card1 {
    background: #e9f3ff;
    background-image: url("~@/assets/lkd/task1-1.png"),
      url("~@/assets/lkd/task1-2.png");
    background-repeat: no-repeat;
    background-position: 0 0, calc(100% - 12px) 100%;
  }
  .card2 {
    background: #fbefe8 url("~@/assets/lkd/task2.png") no-repeat
      calc(100% - 12px) 100%;
  }
  .echarts {
    display: flex;
    .echart {
      width: 50%;
      height: 278px;
    }
  }
  .goodshot {
    height: 460px;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;
    .top {
      width: 21px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      background: url("~@/assets/lkd/top4.png");
      color: #e9b499;
    }
    .top.top1 {
      width: 21px;
      height: 20px;
      text-align: center;
      background: url("~@/assets/lkd/top1.png");
      color: #8e5900;
    }
    .top.top2 {
      width: 21px;
      height: 20px;
      text-align: center;
      background: url("~@/assets/lkd/top2.png");
      color: #494949;
    }
    .top.top3 {
      width: 21px;
      height: 20px;
      text-align: center;
      background: url("~@/assets/lkd/top3.png");
      color: #cf6d3d;
    }
    .item {
      margin-left: 16px;
      width: 100px;
    }
    .right {
      float: right;
      width: 60px;
    }

    .bottom {
      clear: both;
      text-align: center;
    }
    .hot-name {
      font-size: 14px;
      font-weight: 500;
      color: #333;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .count {
      font-size: 14px;
      font-weight: 400;
      color: #737589;
      line-height: 20px;
      text-align: right;
    }
  }
  .collect {
    width: 154px;
    height: 230px;
    padding-top: 47px;
    padding-left: 38px;
    background: linear-gradient(135deg, transparent, #f8f8f9 0) 0 0,
      linear-gradient(-135deg, transparent 12px, #f8f8f9 0) 100% 0,
      linear-gradient(-45deg, transparent, #f8f8f9 0) 100% 100%,
      linear-gradient(45deg, transparent 12px, #f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    .count {
      height: 33px;
      font-size: 24px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #072074;
      line-height: 33px;
      &.count2 {
         height: 33px;
      font-size: 24px;
        margin-top: 20px;
        font-weight: 600;
      color: #072074;
      line-height: 33px;
      }
    }
    .name {
      height: 17px;
      margin-top: 6px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #000412;
      line-height: 17px;
    }
  }
}
</style>
